export const addConsultatif = (editor) => {
  const { Components } = editor;
  Components.addType('consultatif', {
    model: {
      defaults: {
        name: 'consultatif',
        droppable: false,
        attributes: { class: 'consultatif-card-wrapper' },
        components: [
          {
            type: 'div',
            attributes: { class: 'consultatif-card-wrapper' },
            components: [
              {
                type: 'image',
                attributes: {
                  src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/7e21f052f945ab12db395545b27fd199.png',
                },
              },
              {
                type: 'div',
                attributes: { class: 'consultatif-card-text' },
                components: [
                  {
                    type: 'div',
                    attributes: { class: 'show1' },
                    components: [
                      {
                        type: 'text',
                        attributes: { class: 'textContentWeight' },
                        content: '印度客机因乘客手机爆炸紧急降落：乘客均安全'
                      }
                    ]
                  },
                  {
                    type: 'div',
                    attributes: { class: 'show2' },
                    components: [
                      {
                        type: 'text',
                        attributes: { class: 'contextContent' },
                        content: '快科技7月18日消息，据当地报道，日前一架飞往德里的印度航空客机起飞过程中突发意外，一名乘客的手机爆炸，飞机随后紧急降落。报道....'
                      }
                    ]
                  },
                  {
                    type: 'div',
                    attributes: { class: 'show3' },
                    components: [
                      {
                        type: 'text',
                        attributes: { class: 'show4' },
                        content: ' <text style="font-size: 14px;font-weight: 300;">→</text>\
          <a href="https://www.baidu.com" style="color:cornflowerblue;"> 查看详情</a>'
                      }
                    ]
                  },

                ]
              },
              {
                type: 'text',
                attributes: { class: 'show5' },
                content: '<div style="float: left;border: solid 1px gray; width: 0px;height: 28px;margin-top: 7px;margin-right: 15px;"></div>\
                      <text style="font-size: 32px;font-weight: 600;">19</text>\
                      <text style="font-size: 32px;font-weight: 300;">/ </text>\
                      <div style="float: right;padding-left: 5px;">\
                        <text style="font-size: 14px;font-weight: 400;">07月</text>\
                        <br />\
                        <text style="font-size: 14px;font-weight: 400;">2023</text>\
                      </div>'
              },
            ],
          },
        ],
        styles: `
          .show1{
            padding-top: 10px;
          }
            .show2{
              padding-top: 25px;
            }
              .show3{
                padding-top: 25px;
              }
            .show4{
              font-size: 14px;
              font-weight: 300;
            }
              .show5{
                float: right;
                 margin-top: -110px;
              }
          .textContentMonth {
      font-size: 14px;
      font-weight: 400;
    }
    .textContentline {
      font-size: 32px;
      font-weight: 300;
    }
    .textContentDay {
      font-size: 32px;
      font-weight: 600;
    }
    .textContentWeight {
      height: 30%;
      width: 100%;
      font-size: 18px;
      font-weight: 540;
    }
    .contextContent {
      height: 50px;
      width: 100%;
      font-size: 14px;
      font-weight: 300;
    }
    .consultatif-card-text {
      width: 50%;
      height: 100%;
      margin-left: 260px;
    }
    .consultatif-card-wrapper img {
      height: 180px;
      width: 220px;
      float: left;
    }
    .consultatif-card-wrapper {
      border: 1px lightgray;
      border-bottom: 1px solid lightgray;
      margin-left: 10%;
      margin-right: 10%;
      width: 80%;
      height: 180px;
      background-color: white;
      color: black
    }
          `,
      },
    },
  });

  editor.BlockManager.add("consultatif", {
    label: "资讯卡片",
    category: "产品中心组件",
    select: true,
    content: { type: "consultatif" },
    media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 -960 960 960" fill="#5f6368"><path d="M160-120q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm80-80h480v-80H240v80Zm0-160h160v-240H240v240Zm240 0h240v-80H480v80Zm0-160h240v-80H480v80ZM160-200v-560 560Z"/></svg>`
  });
};

